<template>
  <div style="padding: 30px">
    <el-form
      :model="addflupplanForm"
      ref="addflupplanForm"
      label-width="100px"
      class="demo-ruleForm"
    >
    <!-- :rules="addflupplanrules" -->
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="用户账号" prop="nickname">
            <el-input
              v-model="addflupplanForm.nickname"
              :readonly="true"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="用户名称" prop="username">
            <el-input
              v-model="addflupplanForm.username"
              :readonly="true"
            ></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="性别" prop="sex">
            <el-input v-model="addflupplanForm.sex" :disabled="true"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="类型" prop="type">
            <el-input
              v-model="addflupplanForm.type"
              :disabled="true"
            ></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="联系电话" prop="phone">
            <el-input
              v-model="addflupplanForm.phone"
              :readonly="true"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="邮箱" prop="email">
            <el-input
              type="email"
              v-model="addflupplanForm.email"
              :readonly="true"
            ></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="生效时间" prop="createtime">
            <el-date-picker
              v-model="addflupplanForm.createtime"
              type="datetime"
              placeholder="生效时间"
              :disabled="true"
              :editable="false"
              :clearable="false"
              :format="'yyyy-MM-dd HH:mm:ss'"
              :value-format="'yyyy-MM-dd HH:mm:ss'"
              style="width: 100%"
            >
            </el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="详细住址" prop="homeaddress">
            <el-input
              v-model="addflupplanForm.homeaddress"
              :disabled="true"
            ></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="我的车位" prop="parkname">
            <el-input
              v-model="addflupplanForm.parkname"
              :readonly="true"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="计费状态" prop="coststatus">
            <el-input
              v-model="addflupplanForm.coststatus"
              :readonly="true"
            ></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="24">
          <el-form-item label="我的描述" prop="note">
            <el-input
              type="textarea"
              v-model="addflupplanForm.note"
              :readonly="true"
            ></el-input>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      imgurl: "",
      userlist: {
        id: "",
        token: sessionStorage.token,
      },
      addflupplanForm: {},
      // addflupplanrules: {
      //   nickname: [
      //     { required: true, message: "请输入用户账号", trigger: "blur" },
      //     {
      //       min: 3,
      //       max: 20,
      //       message: "长度在 3 到 20 个字符",
      //       trigger: "blur",
      //     },
      //   ],
      //   username: [
      //     { required: true, message: "请输入用户名称", trigger: "blur" },
      //     {
      //       min: 2,
      //       max: 20,
      //       message: "长度在 2 到 20 个字符",
      //       trigger: "blur",
      //     },
      //   ],
      //   sex: [{ required: true, message: "请输入性别", trigger: "blur" }],
      //   type: [{ required: true, message: "请选择类型", trigger: "change" }],
      //   phone: [
      //     { required: false, message: "请输入联系电话", trigger: "blur" },
      //     {
      //       pattern: /^1[3-9]\d{9}$/,
      //       message: "请输入有效的手机号码",
      //       trigger: "blur",
      //     },
      //   ],
      //   email: [
      //     { required: false, message: "请输入邮箱地址", trigger: "blur" },
      //     {
      //       type: "email",
      //       message: "请输入有效的邮箱地址",
      //       trigger: ["blur", "change"],
      //     },
      //   ],
      //   createtime: [
      //     { required: false, message: "请选择生效时间", trigger: "change" },
      //   ],
      //   homeaddress: [
      //     { required: false, message: "请输入详细住址", trigger: "blur" },
      //   ],
      //   parkname: [
      //     { required: false, message: "请输入车位名称", trigger: "blur" },
      //   ],
      //   coststatus: [
      //     { required: false, message: "请输入计费状态", trigger: "blur" },
      //   ],
      //   note: [
      //     { required: false, message: "请输入描述", trigger: "blur" },
      //     { max: 200, message: "描述长度不能超过 200 个字符", trigger: "blur" },
      //   ],
      // },
    };
  },
  methods: {
    async alldonorsin() {
      try {
        const { data: res } = await this.axios.post(
          "users/getMyId?id=" +
            this.userlist.id +
            "&token=" +
            this.userlist.token,
          {
            id: this.userlist.id,
            token: this.userlist.token,
          }
        );
        // console.log(res);
        this.addflupplanForm = res[0];
        res[0].type == 1
          ? (this.addflupplanForm.type = "管理员")
          : (this.addflupplanForm.type = "普通用户");
        res[0].coststatus == 2
          ? (this.addflupplanForm.coststatus = "未缴费")
          : (this.addflupplanForm.coststatus = "已缴费");
        this.imgurl = "http://community.byesame.com/file/" + res[0].icon;
        this.$emit("input", this.imgurl);
        // console.log(this.addflupplanForm);
      } catch (error) {
        console.error(error);
        this.$message.error("请求失败: " + error.message);
      }
    },
  },
  mounted() {
    this.alldonorsin();
  },
};
</script>

<style></style>
